<template>
<Row>
    <Row :gutter="48">
    <Col span="12">
        <div class="cus-card">
            <div class="cus-card-title">
                <span><Icon type="ios-list-outline"></Icon></span>
                <router-link :to="{name:'module_find_service',query:{m_type:this.module_name,type:'0'}}">
                    <span style="color:rgb(11, 70, 163);">专项服务</span>
                </router-link>
                <router-link class="cus-card-title-more" :to="{name:'module_find_service',query:{m_type:this.module_name,type:'0'}}">
                    <Tooltip content="点击查看更多信息" placement="bottom">
                        更多>>
                        <!-- <img src="@/index/images/more.gif" alt="Smiley face"> -->
                    </Tooltip>
                </router-link>
            </div>
            <ul class="cus-card-list">
                <li v-for="item in services">
                    <router-link :to="{name:'service_detail',params:{id:item.id}}">
                        <span class="cus-card-list-icon"><Icon type="ios-paper-outline" style="color:rgb(11, 70, 163);"></Icon></span>
                        {{item.title.length > 25?item.title.substring(0,25)+'...':item.title}}
                        <span class="cus-card-list-time" style="float:right;">{{item.formated_create_time}}</span>
                    </router-link>
                </li>
            </ul>
        </div>
    </Col>
    <!-- 以下为分类的服务机构和企业，当前不需要，已经注释掉 -->
    <!-- <Col span="24">
        <div class="cus-card">
            <div class="cus-card-title">
                <span>服务机构</span>
                <router-link class="cus-card-title-more" :to="{name:'find_agen_com',query:{}}">更多>></router-link>
            </div>
            <ul class="cus-card-list">
                <li v-for="item in service_members">
                    <router-link :to="{name:'personal_exhibition',params:{id:item.id}}">
                        {{item.enterprise_name || item.username}}
                        <span style="float:right;">{{item.formated_create_time}}</span>
                    </router-link>
                </li>
            </ul>
        </div>
    </Col>
    <Col span="24">
        <div class="cus-card">
            <div class="cus-card-title">
                <span>企业</span>
                <router-link class="cus-card-title-more" :to="{name:'find_agen_com',query:{}}">更多>></router-link>
            </div>
            <ul class="cus-card-list">
                <li v-for="item in demand_members">
                    <router-link :to="{name:'personal_exhibition',params:{id:item.id}}">
                        {{item.enterprise_name || item.username}}
                        <span style="float:right;">{{item.formated_create_time}}</span>
                    </router-link>
                </li>
            </ul>
        </div>
    </Col> -->
    <Col span="12">
        <div class="cus-card">
            <div class="cus-card-title">
                <span><Icon type="ios-list-outline"></Icon></span>
                <router-link :to="{name:'module_find_demand',query:{m_type:this.module_name,type:'0'}}">
                    <span  style="color:rgb(11, 70, 163);">专项需求</span>
                </router-link>
                <router-link class="cus-card-title-more" :to="{name:'module_find_demand',query:{m_type:this.module_name,type:'0'}}">
                    <Tooltip content="点击查看更多信息" placement="bottom">
                        更多>>
                        <!-- <img src="@/index/images/more.gif" alt="Smiley face"> -->
                    </Tooltip>
                </router-link>
            </div>
            <ul class="cus-card-list">
                <li v-for="item in demands">
                    <router-link :to="{name:'demand_detail',params:{id:item.id}}">
                        <span class="cus-card-list-icon"><Icon type="ios-paper-outline" style="color:rgb(11, 70, 163)"></Icon></span>
                        {{item.title.length > 25?item.title.substring(0,25)+'...':item.title}}
                        <span class="cus-card-list-time" style="float:right;">{{item.formated_create_time}}</span>
                    </router-link>
                </li>
            </ul>
        </div>
    </Col>
    </Row>
    <br>
    <Row>
        <div class="cus-card">
            <div class="cus-card-title">
                <span><Icon type="ios-list-outline"></Icon></span>
                <router-link :to="{name:'module_article_list',params:{name:module_name,p_type:'*'}}">
                    <span style="color:rgb(11, 70, 163);">专项资讯</span>
                </router-link>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <!--此处添加小导航栏，设为内联元素-->
                <Breadcrumb style="display:inline">
                    <BreadcrumbItem @click.native="handleSelect(item.name)" v-for="item in tree.children" :key="item.name" :to="{name:'module_article_list_tab',params:{p_type:item.name}}">
                        <span v-if="item.name==selectType" style="color:red"><Icon type="arrow-right-b"></Icon>&nbsp;{{item.name}}</span>
                        <span v-else>&nbsp;{{item.name}}</span>
                    </BreadcrumbItem>
                </Breadcrumb>
                <router-link class="cus-card-title-more" :to="{name:'module_article_list',params:{name:module_name,p_type:'*'}}">
                    <Tooltip content="点击查看更多信息" placement="bottom">
                        更多>>
                        <!-- <img src="@/index/images/more.gif" alt="Smiley face"> -->
                    </Tooltip>
                </router-link>
            </div>
            <!-- 嵌套文章列表页 -->
            <router-view></router-view>
        </div>
    </Row>
</Row>


</template>

<script>
import Page from "@/common/model/Page"
import Article from "@/common/model/Article"

export default {
    data() {
        return {
            article_page: new Page("search/article"),
            service_page: new Page("search/service_item"),
            demand_page: new Page("search/demand_item"),
            service_member_page: new Page("search/member"),
            demand_member_page: new Page("search/member"),
            selectType:"*",
        };
    },
    methods:{
        handleSelect(item){
            this.selectType = item;
        }
    },
    computed: {
        articles() {
            return Article.parseList(this.article_page.list);
        },
        services() {
            return Article.parseList(this.service_page.list);
        },
        demands() {
            return Article.parseList(this.demand_page.list);
        },
        service_members() {
            return Article.parseList(this.service_member_page.list);
        },
        demand_members() {
            return Article.parseList(this.demand_member_page.list);
        },
        module_name() {
            return this.$route.params.name;
        },
        tree() {
            var usual_service = this.$store.state.app.dicTree.usual_service.children;
            for(var i = 0; i < usual_service.length; i++) {
                if(usual_service[i].name == this.$route.params.name) return usual_service[i];
            }
            return {};
        }
    },
    created() {
        this.article_page.action_data = { m_type: this.module_name };
        this.article_page.getData();
        this.service_page.action_data = { m_type: this.module_name };
        this.service_page.getData();
        this.demand_page.action_data = { m_type: this.module_name };
        this.demand_page.getData();
        // this.service_member_page.action_data = {  };
        // this.service_member_page.getData();
        // this.demand_member_page.action_data = {  };
        // this.demand_member_page.getData();
    }
}
</script>

<style scoped>
    .cus-card{
        font-family: "微软雅黑";
        height:330px;
        width: 100%;
        margin-top: 10px;
    }
    .cus-card-title{
        font-size: 24px;
        font-weight: 700;
        border-bottom: 1px solid #ddd;
        /* background: url(../images/title_bg.png) repeat-x; */
        color:rgb(11, 70, 163);
        /* background: #f8f8f9; */
    }
    .cus-card-title-more {
        float: right;
        font-size: 14px;
        text-decoration:none;
        color:#000000;
    }
    .cus-card-list a{
        display: block;
        width:100%;
        height:30px;
        line-height: 30px;
        font-size: 14px;
        text-decoration:none;
        color:#000000; 
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .cus-card-list-time {
        font-size:12px;
        color:#9ea7b4;
    }
</style>